<template>
	<sl-page title="等级说明" :safeBottom="false">
		<view class="rules">
			<List :listDatas="rules">
				<template v-slot="{ item }">
					<view class="flex flex-y-center">
						<view class="rules-headimg">
							<sl-image :value="item.image"></sl-image>
						</view>
						<view class="px-1">
							{{item.name}}
						</view>
					</view>
					<view class="rules-rate">
						<view class="">
							<text>直推佣金</text>
							<text class="f-46 px-1">{{item.directRate}}%</text>
						</view>
						<view class="">
							<text>间推佣金</text>
							<text class="f-46 px-1">{{item.secondRate}}%</text>
						</view>
					</view>
					<view class="rules-condition">
						<view class="f-w py-1">
							升级条件
						</view>
						<view class="flex flex-y-center">
							<uni-icons type="smallcircle-filled" size="10" color="#D9D9D9"></uni-icons>
							<view class="px-1">
								累计合伙人 达到 {{item.terms[0].amount}} 后
							</view>
						</view>
						<view class="flex flex-y-center">
							<uni-icons type="smallcircle-filled" size="10" color="#D9D9D9"></uni-icons>
							<view class="px-1">
								累计顾客数 达到 {{item.terms[0].amount}} 后
							</view>
						</view>
						<view class="flex flex-y-center">
							<uni-icons type="smallcircle-filled" size="10" color="#D9D9D9"></uni-icons>
							<view class="px-1">
								累计销售额 达到 {{item.terms[0].amount}} 后
							</view>
						</view>
						<view class="flex flex-y-center">
							<uni-icons type="smallcircle-filled" size="10" color="#D9D9D9"></uni-icons>
							<view class="px-1">
								累计佣金 达到 {{item.terms[0].amount}} 后
							</view>
						</view>
					</view>
				</template>
			</List>
		</view>
	</sl-page>
</template>

<script>
	import DistributionApi from '@/api/distribution/distribution.js';
	import List from '@/pages/components/list/list.vue';
	//
	export default {
		//
		name: 'rules',
		//
		components: {
			List
		},
		//
		data() {
			return {
				//分销等级
				rules: [],
			};
		},
		//
		onLoad(options) {
			this.getDistributionGrade();
		},
		//
		onShow() {

		},
		//
		methods: {
			//得到分销人
			getDistributionGrade: async function() {
				let res = await DistributionApi.getDistributionGrade();
				this.rules = res.obj.grades;
				console.log('res: ---------------1111-----', res);
			},
		}
	};
</script>

<style lang="scss" scoped>
	.rules {
		font-size: $uni-font-size-base;
		color: $uni-text-color-primary;
		padding: 18rpx;
		// margin: 0rpx 16rpx;

		.rules-headimg {
			position: relative;
			width: 60rpx;
			height: 50rpx;
		}

		.rules-rate {
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin: 16rpx 0rpx;
			height: 44px;
			flex-shrink: 0;
			border-radius: 4px;
			background: linear-gradient(153deg, #FFF4F1 0%, #FFF3F2 100%);
			box-shadow: 0px -4px 0px 0px #FFEDE8 inset;
		}

		.rules-condition {
			padding: 12rpx 24rpx;
		}
	}
</style>